<template>
  <div id="TicketIndex">
    <main-header :title="'奖券管理'" showAddTicketBtn="true" :crumbsArr="crumbsArr" />
    <div class="main_wrapper">
      <div
        class="main"
        v-loading="tableLoading"
        element-loading-text="加载中"
        element-loading-background="rgba(255, 255, 255, 0.8)"
      >
        <ticket-table
          :ticketData="ticketData"
          @reloadPage="loadTableData(pageInfo.currentPage)"
        />
        <el-pagination
          layout="prev, pager, next"
          :page-count="pageInfo.pageCount"
          :page-size="pageInfo.pageSize"
          :current-page="pageInfo.currentPage"
          @current-change="loadTableData($event)"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import MainHeader from '@/components/layouts/MainHeader'
import TicketTable from '@/components/pages/ticket/TicketTable'
import API from '@/config/api.js'
import ErrorConfig from '@/config/error.config.js'

export default {
  name: 'TicketIndex',
  data () {
    return {
      crumbsArr: [ // 面包屑
        { name: 'welcome', txt: '首页' }, { txt: '奖券管理' }
      ],
      pageInfo: { // 页面分页信息
        pageCount: 1,
        pageSize: 0,
        currentPage: 1
      },
      ticketData: null,
      tableLoading: false
    }
  },
  components: {
    MainHeader,
    TicketTable
  },
  beforeRouteEnter (to, from, next) {
    next(vm => vm.loadTableData())
  },
  watch: {
    // '$route' (to, from) {
    //   if (to.name === 'ticket') {
    //     this.loadTableData()
    //   }
    // }
  },
  methods: {
    async loadTableData (page = 1) { // 加载表格数据
      this.tableLoading = true // 打开加载框
      const accountId = JSON.parse(window.sessionStorage.getItem('userInfo')).accountId
      const response = await API.queryTicket({ accountId, page })
      this.tableLoading = false
      const { code } = response
      if (code === 1) {
        this.ticketData = response.data.rows
      } else {
        if (code === -1) {
          const { msg } = response
          this.$message.error(msg)
        } else {
          this.$message.error(ErrorConfig[code])
        }
      }
    }
  }
}
</script>

<style scoped lang="scss">
  #TicketIndex {
    .main_wrapper {
      padding: 20px 20px 0;
      .main {
        box-sizing: border-box;
        padding: 20px;
        border-radius: 4px;
        background: #fff;
      }
      .el-pagination {
        margin-top: 20px;
        text-align: center;
      }
    }
  }
</style>
